<template>
  <div>
    <div class="card" style="margin-bottom: 10px">
      <el-input placeholder="请输入挂号单编号进行查询" style="width: 200px" v-model="data.registrationNumber"></el-input>
      <el-button type="info" plain style="margin-left: 10px" @click="load()">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <div style="margin-bottom: 10px">
<!--        <el-button type="danger" plain @click="delBatch">批量删除</el-button>-->
      </div>
      <div class="table">
        <el-table :data="data.tableData" strip @selection-change="handleSelectionChange" >

          <el-table-column prop="registrationNumber" label="挂号单编号"  width="160"></el-table-column>
          <el-table-column prop="doctorName" label="挂号医生"></el-table-column>
          <el-table-column prop="department" label="挂号科室"></el-table-column>
          <el-table-column prop="registrationDate" label="挂号日期" width="140"></el-table-column>
          <el-table-column prop="visitDateTime" label="预约就诊日期时间" width="180"></el-table-column>

          <el-table-column prop="status" label="挂号状态"  width="160">
            <template v-slot="scope">
              <el-tag
                  :type="getStatusTagType(scope.row.status)"
                  disable-transitions
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdTime" label="创建时间" width="170"></el-table-column>
          <el-table-column prop="updatedTime" label="更新时间" width="170"></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template v-slot="scope">
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
              style="margin-top: 5px"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="data.pageNum"
              :page-sizes="[3, 5, 10, 15, 20]"
              :page-size="data.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.total">
          </el-pagination>
        </div>
    </div>

      </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import request from '@/utils/request'
import { ElMessageBox, ElMessage } from 'element-plus'

// 定义响应式数据
const data = reactive({
  tableData: [],  // 表格数据
  pageNum: 1,     // 当前页码
  pageSize: 10,   // 每页显示数量
  total: 0,       // 总记录数
  name: null,     // 搜索条件
  formVisible: false, // 表单显示状态
  form: {},       // 表单数据
  ids: [],        // 选中数据的ID
  registrationNumber: null, // 挂号单编号
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
})

// 分页查询
const load = (pageNum = data.pageNum) => {
  data.pageNum = pageNum
  request.get('/RegistrationForm/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      registrationNumber: data.registrationNumber,
      patientId: data.user.id
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data?.list
      data.total = res.data?.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 删除单条数据
const del = (id) => {
  ElMessageBox.confirm('您确定删除吗？', '确认删除', { type: 'warning' }).then(() => {
    request.delete('/RegistrationForm/delete/' + id).then(res => {
      if (res.code === '200') {
        load()
        ElMessage.success('操作成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(() => {})
}

// 批量删除
const delBatch = () => {
  if (!data.ids.length) {
    ElMessage.warning('请选择数据')
    return
  }
  ElMessageBox.confirm('您确定批量删除这些数据吗？', '确认删除', { type: 'warning' }).then(() => {
    request.delete('/RegistrationForm/delete/batch', { data: data.ids }).then(res => {
      if (res.code === '200') {
        load()
        ElMessage.success('操作成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(() => {})
}

// 处理选中的行
const handleSelectionChange = (rows) => {
  data.ids = rows.map(v => v.id)
}

// 重置筛选条件
const reset = () => {
  data.registrationNumber = null
  load()
}

// 处理页码变化
const handleCurrentChange = (pageNum) => {
  load(pageNum)
}
const handleSizeChange=(pageSize)=> {
  data.pageSize = pageSize
  load()
}

// 页面初始化加载数据
load()


// 根据挂号状态返回对应的标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case '挂号成功，等待叫号':
      return 'success';
    case '预约失败':
      return 'danger';
    case '已叫号':
      return 'info';
    case '等待处理':
      return 'warning';
    default:
      return 'primary';
  }
};

</script>

